<template>
    <div class="home_wrapper"> 
       <transition name="fade">
           <div class="home">
                <div class="tit">
                <div>世界卫生组织推荐标准</div>
                <div>每天需要摄入25克膳食纤维</div>
            </div>
            <div class="tit2">
                <div>
                    测一测<br/>
                    你今天吃够了么?
                </div>
            </div>
            <transition
                name="bounce"
                enter-active-class="bounceInLeft"
                leave-active-class="bounceOutRight"
                >
            <img src="http://file.rzkeji.com/web/f6_activity/home/man.png" class='man'  ref="man" v-show="show==true">
            </transition>
            <transition  enter-active-class="animated infinite bounce delay-2s" leave-active-class="animated fadeOutLeft">
                <div class="btn">
                    <router-link :to="{name:'caculate'}" tag="div" replace>
                        <div>点击</div>
                        <div>测试</div>
                        </router-link>
                </div>
            </transition>
        </div>
       </transition>
    </div>
    <!-- <div>
        <transition
  name="bounce"
  enter-active-class="bounceInLeft"
  leave-active-class="bounceOutRight"
>
  <p v-if="show">heaaaaaaaaaaaaaallo</p>
</transition>


    </div> -->
</template>
<script>

export default {
    name:'home',
    data() {
        return {
            show:false
        }
    },
    mounted() {
        let _this=this
        this.$refs.man.onload=function(){
            setTimeout(()=>{
                _this.show=true
            },500)
        }
    },
}
</script>
<style lang="scss" scoped>
@import '../../common/css/index.scss';
    .home_wrapper{
        width:100%;
        height: 100%;
        background:url('http://file.rzkeji.com/web/f6_activity/bg1.jpg');
        background-size: 100%;
        overflow: hidden;
        
    }
    .home{
        width:100%;
        height: 100%;
        overflow: hidden;
        // background:url('../../../static/img/home/man.png');
        // background-size:100%;
        // background-repeat: no-repeat;
        // background-position:0px 450px;
        .tit{
            padding-top:80px;
            font-size: 40px;
        }
        .tit2{
            margin-top:10px;
            font-size: 80px;
            position: relative;
            z-index: 9
        }
        .man{
            width: 100%;
            // position: absolute;
            // bottom:-160px;
            // left:0;
            // z-index:0
        }
        .btn{
           &>div{
               background:url('../../../static/img/home/btn.png');
                background-size:100% 100%;
                display: flex;
                justify-content: center;
                align-content: center;
                flex-wrap: wrap;
                div{
                    width: 100%;
                }
           }
        }
    }

    .fade-enter-active, .fade-leave-active {
        transition: all 1s
        }

    .fade-enter{
        opacity: 0;
        transform: translateY(0)
        }
        .fade-leave-active {
        opacity: 0;
        transform: translateY(-40vh)
        }        
</style>